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CSS : Cascading Style Sheets 



*>Cela signifie : "Cascading Style Sheets", ce qui peut 
se traduire en francais par "Feuilles de style en 
cascade". 

CSS 1: publie en tant que recommandation du W3C en 1996. 

CSS 2: publie en tant que recommandation du W3C en 1998. 

■a) CSS 3: son developpement a debute en 1998; un travail 
encours. 

^) En 2005, le developpement de CSS1 et CSS2 a repris; ne sont 
pas totalement supportes par toutes les versions des 
browsers. 

9 Depuis 2005, CSS1 n'est plus une recommandation du W3C. 
CSS 2.1: publie en 2007. Un travail encours : il est appele CSS3 

Les differences entre les differentes versions supportees par les differents navigateurs : 

http://www.webdevout.net/browser-support- 



css?IE5 5=on&IE6=on&IE7=on&IE8=on&FX2=on&FX3=on&0P9=on&SF2=on&uas=CUST0M 
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Principes 



Objectif : Separer le fond de la forme ! 

^Le document HTML correspond au 'fond': c'est 
I'information que je souhaite transmettre. 

Le style CSS correspond a la 'forme' 

HL'apparence que le site doit avoir : la couleur et la police 
du texte, la taille des titres, la position des menus, la 
couleur ou I'image de fond etc... 

Pourquoi en cascade? 

3>Les elements du document heritent des regies de 
style de leurs parents. 

C^On utilise des operateurs de selection pour affiner le 
groupe de balise sur lequel les styles s'appliquent. 
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Definir un style pour un 
document HTML 



^On peut ecrire du code CSS a 3 endroits differents : 

^Methode 1 : style « en ligne/ inline») : dans les balises HTML en 
utilisant I'attribut style : 

<body > 

<p style = "color :blue " > ... </p> 
</body > 

^Methode 2 : style « interne » :dans I'en-tete du fichier HTML en 
utilisant la balise <style> 

<head> 

<style t y pe = " t ex t / c s s " > ... </style> 
</head> 

^Methode 3 : style « externe » dans un fichier .ess en utilisant la 
balise <link> : 

<head> 

<link rel=" stylesheet " type = " te xt / cs s " 
hr ef = "monSt y le . c ss " /> 
l</head> 
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Style en ligne (Inline Style 

Sheets) (1/4) 



^En utilisant I'attribut style, vous pouvez specifier le 
style de presentation cTun seul element HTML. 

^Syntaxe: A I'interieur de la balise ouvrante sont 
ajoutees les regies de styles : 

<balise style="propriety1 : value 1 ; propriety 2 : value2 ; "> 
...</balise> 

<html> 

<headxtitle>Style en ligne</title> 

</head> 

<body> 

<p style="color : red ; text-align : right">This is a 
right- justified paragraph, with some 
<i style="color : green">italic green text</i> 
</p> 

body></html> 



9 Telichargement de .. 



•t Osez HTMLi el CSS... 



_ ie Style 

1 ■ ts) 



This is a right-justified paragraph, with some italic green text 

And hereis a formatted link to W3C in a sans-serif font 
(preferably Arial). 




1 <html> 



2 <headxtitle>Style en ligne</titlex/head> 

3 <body> 

4 <p style="color:red;text-align:right">This is a 

5 right-justified paragraph, with some <i style="color:green">italie green 
text</ix/p> 

6 <p>And <a 5tyle="font-family:Arial,sans-serif;color:red;text- 
decoration:none;font-size:17pt;" 

7 href="http://www.w3schools.com">here</a>is a formatted link to W3C in 
a sans-serif font (preferably Arial). 

8 </p> 

9 </body> 
10 </html> 



1 <html> 

2 <head> 

3 <title> Inline Style Sheets</title> 

4 </head> 
6 <body> 

<p>Here is an image <img src^" http://www.w3schools,com/imases/w3schoolslogo,gif " 
alt="Logo" 

style="margin-left:0.3in; 
8 margin-right:0.3in; 

vertical-align 'middle; 
10 border-stvle:double; 

border colorrgreen" /> embedded in text.</p> 

12 <ol style="list-style-type:upper-alpha"> 

13 <li> one thing</li> 
<li>oranother</li> 

15 </ol> 

16 <ul style="list-style-typ e:square;"> 

i <li> with this</li> 

13 <li>Or that</li> 1 ;|Ofile:///Cywamp/www/tJemo/styleS20en%20ligra%20liste.html 

19 </ul> 

20 </bodyx/html> 



Style 
(3/4) 




Here is an image 



A. one thing 

B. or another 



■ with this 
» or that 



SR. m3schools.com 



embedded in text. 



Style en liqne (Inline Style 

Sheets) (4/4) 



i^Cette methode a tous les defauts : 

^Le CSS sera peu lisible a I'interieur des balises, 

^Ne permet pas de profiter de tous les avantages du 
CSS, comme la possibility de changer la couleur de 
tous les titres du site en un die. 

J Peut induire des incoherences, comme des elements 
similaires se trouvent formater differemment , 

^Viole le principe fondamental du HTML: separer le 
contenu de la presentation. 
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Methode 2 : dans I'en-tete du fichier 
HTML (style « interne ») 



^Le style CSS est a I'interieur du meme fichier HTML, 
entre les balises <head> </head>. 

^Syntaxe: mettre une balise <style> </style> a 
I'interieur de I'en-tete, comme ceci : 



<html> 
<head> 

<title>Exemple de style interne</title> 
<style type="text/css"> 

/* ceci est un commentaire CSS */ 
/* Vous taperez vos regies de styles CSS ici */ 
hi {color: blue;} 
</style> 
</head> 
<body> 

<p>Cette page comporte du CSS directement dans le heade 1 ' entete .</p> 
</body> 

</html> 




Regie de style: Principes 1/2 



Declaration 



Declaration 



{color:blue; font-size: 12px;} 



Property Value Property Value 

^Definition de regies de styles en utilisant des selecteurs 
et des declarations. 

^ Selecteur selectionne le/les elements HTML sur 
lequel/lesquels la regie de style va/vont s'appliquer. 

Le selecteur le plus basique est celui d'un seul element HTML. 

B Par exemple, un selecteur hi choisi tout les elements titre de niveau 
1 d'une page HTML. 

^Pour chaque selecteur, on defini une ou +sieurs 
declaration qui definie comment I'element selectionne 
va etre style. 

B Par exemple : La couleur en bleu, la police de tail le 12. 
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Principes 2/2 



®Exemple : [g] ( 



selecteur 



font-family: Arial, Helvetica, 

font-size: small; 

color: blue; 



sans-serif;! 



} declarations 

'Le block entre les accolades { et } : 3 declarations 

declaration contient une propriete suivie de deux-points (:), 
un espace puis une valeur puis un point-virgule (;) 

^Le retour a la ligne est optionnel. II faut juste laisser un espace 
apres le point-virgule. 



p {color: green; font-size: small; color: blue;} 
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Les styles internes 



Student data. 


1 






2 


<html> 


Chris Smith 19 


3 
4 


<head> 


Pat Jones 20 


5 


<title> Internal Style Sheets </title> 


Doogie Howser 9 


6 


<style type="text/css"> 




7 


table {font-family:Arial, sans-serif } 




8 


caption {color: red; 




9 


font-style:italic; 




10 


text-decoration: underline} 




11 


th {background-color: red} 




12 


</style> 




13 


</head> 




14 






15 


<body> 




16 


<table> 




17 


<caption> Student data. </caption> 




18 


<trxth> name </th> <th> age</thx/tr> 




19 


<tr><td> Chris Smith </td> <td> 19 </tdx/tr> 




2B 


<trxtd> Pat Jones </td> <td> 20 </tdx/tr> 




21 


<tr><td> Doogie Howser </td> <td> 9 </td></tr> 




22 


</table> 




23 


</body> 




24 


</html> 


2912/2013 
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Groupement de style 



^Vous pouvez utiliser le meme style pour plusieurs 
elements sur votre page. Par exemple, on veut que tous 
les p et b de ma page soient en rouge : 

^Separer les selecteurs par des virgules . 



p 






{ 








color: 


red; 


} 






b 






{ 








color: 


red; 


} 







virgule 



selecteur 



selecteur 




^ Notez qu'il y a un espace apres chaque 
virgule qui separe 2 selecteurs! 

^ L'ecriture p, b est equivalente a b, p 
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Imbrication de styles 







P 




p, b 


b, p 


{color: 
b 


red; } 


{color: red;} 


{color: red;} 


{color: 


red;} 



'3 ecritures equivalentes pour mettre le texte de tous les pet ben rouge) 



P b 

{color: red;} 



b P 

{color: red;} 



(mettre le texte des elements qui sont imbriques 
dans des en rouge) 



(mettre le texte des elements qui sont imbriques 
dans des en rouge) 
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imbrication de styles : exemple 



^EX: definir un style uniquement pour les balises <em> 
qui se trouvent a I'interieur d'un titre <h3> : 



h3 em { 
color: blue; 
} 



'L'ordre est tres important ! Si vous aviez mis "em h3" 
cela aurait voulu dire "Tous les <h3> situes a I'interieur 
de balises <em>". 
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Definir des selecteurs 
specifiques 



^Le selecteur d'element comme le selecteur de p dans 
I'exemple precedent aura une incidence sur tous les 
elements p. 

|^ Comment definir un selecteur qui permettra que 
seulement certain elements p dans le document seront 
touche par la regie de style ? 



^Utiliser des attributs speciaux qui fonctionnent sur 
toutes les balises : 
^L'attribut class 
z^L'attribut ID 
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L' attribut class 



©C'est un attribut que Ton peut mettre sur n'importe 
quelle balise, aussi bien titre que paragraphe, image etc. 

<h1 class="nomclasse"> </h1> 
<p class="nomclasse"x/p> 
<img class="nomclasse" /> 

©Que met-on comme valeur a I'attribut class ? En fait, 
vous mettez un nom. Ce que vous voulez comme nom 
de variable. 

^On cree la classe : un point (.) suivi du nom de la classe 
Syntaxe : 

. nomclasse { 
propertyl : valuel ; 
property2: value2; ... } 



L' attribut class : exemple 1/2 



-Exemple : 

£>Vous voulez definir un style appele "important" qui ecrit 
le texte en rouge / 18 pixels. 

©On commencera par preciser la regie de style qui dit : 

« Je veux que toutes mes balises qui ont la classe 
"important" soient ecrits en rouge / 18 pixels » : 



. important { 
color: red; 
font-size: 1 8px; 
} 
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_'attribut class : exemple 2/2 



^Exercice: rajouter I'attribut class="important" a la 


citation (quotation) et au dernier paragraphe : 




<html> 






<head> 






<title>Page d' exemple pour tester le CSS</title> 






</head> 






<body> 






<p> Bonjour !<br/> Je suis une page XHTML</p> 






<p> Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : 






<q> C'est un petit pas pour 1 'Homme, un grand pas pour 1 'Humanite</qxbr/> 






le code HTML... </p> 






<p> Quoi, cela ne veut rien dire ce que j'ecris ?, c'est pour tester notre 






classe</p> 






</bodyx/html> 
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'attribut class : restreint a 
un seul type de balise 



<html> 
<head> 

<title>internal CSS</title> 
<style type="text/css"> 
hi {color:blue; 

text-align: center} 
p. indented {text-indent : 0. 2in} 
</style> 
</head> 
<body> 

<h1> Centered Title </h1> 

<p class="indented">This paragraph 
will have the first line indented, 
but subsequent lines will be flush. 

</p> 

<p>This paragraph will not be 
indented .</p> 
<h1> The End </h1> 
</body></html> 



Centered Title 

This paragraph will have the first Une indented, but 
subsequent lines will be flush. 
This paragraph will not be indented. 

The End 

^11 est possible de 
restreindre une classe 
pour que elle s'applique 
a un seul type de balise: 

^p. intended permet 
d'utiliser la classe 
indented seulement 
avec p 
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L' attribut id 



©L'attribut id fonctionne exactement de la meme 
maniere que class, a un detail pret : il ne peut etre 
utilise qu'une fois dans la meme page HTML : 

<h1 id="nomid"> </h1> 

^Quel interet ? Cela vous sera utile si vous faites du 
Javascript plus tard pour reconnaitre certaines balises. 

^Nous ne mettrons des id que sur des elements qui 
sont uniques sur votre page, par exemple le logo. 



^On cree I'id: un diese(#) suivi du nom de I 1 id 
^ Syntaxe : 

#nomid { 

propertyl : valuel ; property2: value2; ., 



• } 
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L' attribut id : exemple 1/2 



^Exemple : Vous voulez definir un style appele "unique 1 
qui ecrit le texte en bleu/ 28 pixels. 



#unique{ color: blue; font-size: 28px; } 

Rajouter I'attribut id="unique" a I'unique balise que 
vous voulez identifier: 



<p id="unique">...</p> 
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L' attribut id : exemple 2/2 



Je veux que le paragraphe qui contient le logo comme 


image soit ecrit en bleu/ 28 pixels » : 




<html> 






<headxtitle>Images</title> 






<style type="text/css"> 






#unique{ color: blue; font-size : 28px ; } 






</style> 






</head> 






<body> 






<p> un premier paragraphe</p> 






<p id="unique"> 






<img src="banniere01 . jpg" alt="logo" align="left" width="50" height="50" /> 






un paragraphe avec un image. L' attribut align de 1' image a pour valeur 






"left". L 1 image va etre a gauche de ce paragraphe. 






</p> 






<p> un dernier paragraphe. </p> 






</bodyx/html> 





Combiner class /ID 
: un exemple 



^Exemple : on a les 2 regies de style : 

.important { color: red; font-size: 18px; } 
#unique{ color: blue; font-size: 28px; } 

OEcrire une regie qui mettra en vert le texte d'un 
paragraphe qui defini la classe . important et qui a 
pour identifiant #unique 

#unique p. important { color: green; } 



<p id="unique" class="important"> 

<img src="banniere01 . jpg" alt="logo" align="left" width="50" height="50" /> 
un paragraphe avec un image. L' attribut align de 1' image a pour valeur 
"left". L'image va etre à gauche de ce paragraphe. 
</p> 

<p> un dernier paragraphe . </p> 
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Methode 3: les styles 
externes 



©Les CSS externes placent les styles dans un 
fichier externe avec I'extension .CSS 

^Une feuille de style externe est ideal lorsque le style 
est applique a plusieurs pages. 

<^Avec une feuille de style externe, vous pouvez 
modifier I'apparence d'un site Web tout en 
changeant un seul fichier. 

-^Chaque page doit etre lie a la feuille de style en 
utilisant la balise <link>. 

01a balise <link> va a I'interieur de la section de tete: 

^Facilite la MAJ des styles utilises. 

Bc'est la solution recommandee. 



External Style Sheets: un 
example 



/* myStyle . ess*/ 



myStyle . ess 



hi {color : blue; text-align : center;} 
p. indented {text-indent: 0.2in;} 



<htmlxhead> <title>Title for Page</title> 
<link rel="stylesheet" 
type="text/css" 
href="myStyle.css"/> 

</head> 
<body> 
<h1>Centered Title</h1> 

<p class="indented">This paragraph will have the first line 
indented, but subsequent lines will be flush. </p> 

<p>This paragraph will not be indented . </p> 

<h1>The End</h1> 
</body> 
</html> 



page . html 
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Diverses feuittes de style separees 
pour differents medias de sortie 



^L'ecran et rimprimante par exemple sont des modes de 
sortie tres differents pour des donnees structurees 
agreablement. 

^Vous pouvez incorporer differents fichiers CSS pour les 
differents modes de sortie, qui peuvent contenir des 
definitions de formats differentes. 

^Le navigateur decide lors de la presentation des pages 
quel fichier CSS incorpore. 

^Vous definissez un type de sortie avec I'attribut media, 
un ou plusieurs types de sortie pour media. Plusieurs 
mentions sont a separer par des virgules. 



Exemple : style externe avec 

media 



<html> 
<head> 

<link rel="stylesheet" media="screen" 

href="website . css"> 

<link rel="stylesheet" media="print" 
href="impression . css"> 

<link rel="stylesheet" media="aural , tv" 

href="baf les . css"> 

</head> 

<body> 

</body> 

</html> 
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style interne avec ©media 



&\\ existe egalement la possibility de definir differents 
modes de sorties dans un passage de style interne avec 
@media 

*^Avec @media , vous definissez dans un passage style un 
certain mode de sortie. Pour chaque sorte de mode que 
vous voulez definir, vous pouvez noter une telle 
commande. 

^Derriere la commande @media suit, separe par un 
espace, le mode de sortie desire. Vous pouvez aussi 
mentionner plusieurs modes de sorties a la suite 
separes par des virgules. 



Exemple : ©media 



<html> 
<head> 
<style> 
@media screen 
{ 

p. test {font-family : verdana, serif ; font-size: 1 4px; } 
} 

@media print 
{ 

p. test {font-family : times, serif ; font-size: 1 0px; } 
} 

@media screen, print 
{ 

p. test {font-weight: bold; } 
} 

</style> 

</head><body>...</body><html> 
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Different Media Types 



Media Type 


Description 


all 


Pour tout type de sortie 


aural 


Pour les sorties son 


print 


Pour imprimante 


projection 


Pour les sortie vers un videoprojecteur 


screen 


Pour les sorties sur ecran PC 


tv 


Pour le sorties TV 



Note: Les valeurs de media ne sont pas sensible a la 
casse!!! 



Heritage de style 



^>Quel est le style qui sera utilise quand il ya plus d'un 
style specifie pour un element HTML? 

Exemple : 



/* myStyle.css*/ 
hi { text-align: right; font-size: 8pt;} 



my Style. ess 



<htmlxheadxtitle>Title for Page</title> 

<link rel="stylesheet" type="text/css" href="myStyle.css"/> 
<style type="text/css"> 

hi {color:blue; text-align: center; font-size: 20pt;} 
</style> 
</head><body> 
<h1>Centered Title</h1> 
<p>This is a paragraph. </p> 
<h1>The End</h1> 
</body></html> 



page.html 



La couleur est heritee de la feuille de style externe et I'alignement ainsi que la taille de 
police sont remplaces par les valeurs dans la feuille de style interne. 
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Quel est le style qui sera utilise quand il ya plus 
d'un style specifie pour un element HTML? 



^Hes styles peuvent etre specifiees: 

^L'interieur d'un element HTML 

^L'interieur de la section en-tete d'une page HTML 

^Dans un fichier CSS externe (ou meme dans multiples feuilles 
de style externes qui peuvent etre referencees dans un meme 
document HTML simple). 

^Classification des regies de styles par ordre de priorite : 
( 4 est la plus haute priorite) 

1. Les styles par defaut du navigateur 

2. Les feuilles de style externe 

3. Les styles interne (dans la section head) 

4. Les styles en ligne (a I'interieur d'un element HTML) 



>uel est le style qui sera utilise quand il ya plus 
d'un style specifie pour un element HTML? 



^Ainsi, un style en ligne (a I'interieur d'un element HTML) 
a la plus haute priorite, ce qui signifie qu'il remplace un 
style defini dans la balise <head>, ou dans une feuille de 
style externe, ou dans un navigateur (une valeur par 
defaut). 

^NB: Si le lien vers la feuille de style externe est place 
apres la balise <style> du style interne, les style externes 
auront une plus haute priorite sur les styles internes! 



(voir exemple transparent suivant ) 
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This is a paragraph. 



Centered Title 
The End 



<htmlxhead> <title>Title for Page</title> 
<link rel="5tylesheet" type="text/c5s' - href="myStyle,css'Y> 
<style type="'text/cs£"> 

hi [color: blje; text-align: center; font-size; 20pt;} 
6 </style> 
</head>-ebady> 
<nl>Ceritered Title</hl> 
■sp^This is a paragraph 

<m>The Enc</hi> 

11 </bodyx/html.> 

^ Style interne mis en commentaire 



/* myStyle.css*/ 

hi { text-align: right; 

font-size: 8pt;} 



This is a paragraph. 



<htmi><h€ad> <title>Title for Page^/titie^ 

■clink rel=" stylesheet" type="text/css H ' href="niyStyle.css'7 : * 

<style type="teKt/css"H 
f* hi {color:blue; teat-align: center; font-size: 2Spt;} V 

</style> 
c/head?<0ody> 
<til>Centered Title</hl> 

<p>ThiS is a paragraph. <:/p> 
<ril>The End</hl> 
</bodyx/html> 



/* myStyle.css*/ 

hi { text-align: right; 

font-size: 8pt;} 



U-nlnr - 

This i&a paragraph. 



<ntniL>-=heafl* | <titie>Titie for Pag.e</ title* 
<style type= "text/css"> 

hi (color:blje; text-align: center; font-size: 2£>pt;} 

</style> 

<link reWstylesheet" type="te?ct/css " href="myStyl.e.c&s" , /> 
</headxbody> 

-ehls-Centered Title</hl> 
<p:>This is a paragraph. </p> 

<hl>The Erd<:/hl> 
</bodyx/html> 



£>Style interne, puis 
style externe 



/* myStyle.css*/ 

hi { text-align: right; 

font-size: 8pt;} 



Centered Title 

This is a paragraph. 

The End 



•^tmixhead* ^titled-Title for Pages/title* 
<link rel="stylesheet w type="text/css" href^'myStyle.css'V* 
<style type="text/css"> 



^ Style externe, puis 



ni (C0Lor:aue; text-aiign: tenter; rom-size: ^upT;j. 

6 < /style* 

7 </nead3"trjody? 

8 <hl>Centered Title</hl> 

9 <p>This is a paragraph .<7p> 

10 <hl>The Erri</hl> 

11 </bodyx/html> 


/* myStyle.css*/ 

hi { text-align: right; 

font-size: 8pt;} 
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Heritage du style 



<htmlxhead> 

<title>Titre du f ichier</title> 
<style type="text/css"> 

body { font-size: 1 6pt; background-color:#FFFFCC; margin-left: 
hi { font-size :48pt; color :#FF0000; font-style : italic ; 

border-bottom: solid thin black; } 
p,li { line-height: 14pt; 

font-family:Helvetica,Arial, sans-serif; 
letter-spacing:0. 2mm; 
word-spacing:0.8mm;color:blue; } 
</style> 
</head> 
<body> 

<h1>Titre 1</h1> 
<p>Ici un paragraphe normal</p> 
<ul> 

<li>Un élément de la liste</li> 
<li>Un autre élément de la liste</li> 
</ul> 
</body> 
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la balise <hl> est dans la section 
<body>. El le en herite le style : 
background-color:#FFFFCC; margin- 
left:100px;, ... 




emple : heritage de style 



Edit and Click Me >> 



<htffll> 
<head> 

<title>Titre du f ichier</title> 
< style type= n text/c5s"> 

body { font-size :16pt; background-color: fFFFFCC; margin- 
left :10QpX; i 

hi [ font-size:48pt; eolortlFFOOOO? font-style:italie; 
border-bcttom:solid thin black; } 
p, li { line-height: 14pt; 

f ont- family : Helvetica, Aria 1, sans-serif; 

letter- spacing : 0 . 2mm; 

word- sp a c i ng : 0 . 8mm; col o r : bl us ? ] 

</style> 

<fhea<3> 

<body> 

<hl>Titre l</hl> 

<p>ici un paragraphe normal</p> 

<ul> 

<li>On seacutedaeacutejmetit de la liste</li> 
<li>u"n autre fieacute; l5eaeute;ment de la liste</li> 
</ul> 

</body> 



Edit the code above and click to see the result. 



Titre 1 



lei un paragraphe normal 

• Un element de la liste 

• Un autre element de la 



iste 



W3Schools.com - Try it yourself 
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Les balises universettes 



^Comment appliquer une class (ou un id) a certains mots 
qui ne sont pas entoures par des balises? 

^Exemple : Comment styler uniquement "Neil 
Armstrong" dans le paragraphe suivant : 

<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969</p> 

^SOLUTION : Les balises universelles : <div> et <span> 

^Contrairement aux autres tags, les balises universelles n'ont 
pas de sens, mais elles permettent d'obtenir des effets tres 
impressionnants avec les CSS!!! 

^Pourquoi universelle? n'ont pas de sens ni en terme de fond 
ni en terme de forme. 



Les balises universelles 



^<div> et <span> sont des balises HTML dont le seul role 

est de delimiter une zone associee a un style : 

-^<div> pour les blocs de texte (a la maniere d'un 
paragraphe), <span> pour une suite de mots dans un texte. 

•^Sans style, ces balises ne produisent rien de particulier (a part 
un retoura la ligne pour<div>). 

€^<span> </span> : c'est une balise de type inline qui se 
met a I'interieur d'un paragraphe, comme <strong>, 
<em>, <q>. 

I^<div> </div> : c'est une balise de type block. Comme 
<p>, <hl> etc... Elle cree un nouveau "bloc" dans la 
page, et provoque obligatoirement un retour a la ligne. 
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<div> et <span> 



^ Pour definir un style applicable seulement a une partie de la page 
et non plus a une balise <HTML> precise, vous pouvez placer un 
attribut style dans une balise <DIV> (division) ou <SPAN> (fusion). 

& Ces balises definissent une zone de texte donnee, done tout ce 
qui se trouve entre la balise de debut et la balise de fin adopte le 
style defini. 

& La seule difference entre <DIV> et <SPAN> est que la premiere 
entrame un saut de ligne et la seconde pas. 

^ <SPAN> modifie ainsi le style de n'importe quelle partie de texte 
situee a I'interieurd'un paragraphe ( meme un mot isole ou une 
lettre seule ! ) 

& L'attribut class est tres puissant et sa combinaison avec un bloc 
<DIV> ou un element interne <SPAN> permet de creer des 
elements nouveaux, que HTML ne contient pas a ce jour et ne 
contiendra peut-etre jamais. 



La Balise Div 



<DIV> fait partie de la douzaine de balises qui servent a structurer 
le document. 

O La balise <DIV> peut etre utilisee pour diviser un document en 
plusieurs sections qui seront, par exemple, alignees chacune 
d'une facon differente. Dans les premiers navigateurs, cette 
balise ne possedait d'ailleurs qu'un seul attribut :Align, 
avec comme valeurs possibles : center, right, left ou justify 

<DIV Align="center" > </DIV> 

La balise <DIV> est assez similaire a la balise <SPAN> pour ce qui 
concerne sa fonction, avec ce pendant une distinction importante: 

^<DIV> est une balise encadrant tout un "bloc" du document (block-level 
element). El le occasionne un saut de ligne, contrairement a la balise 
<SPAN>. 

~J El le peut contenir des paragraphes, des titres, des tableaux, et meme 
d'autres divisions. Ce qui fait de <DIV>, la balise ideale pour marquer 
differentes sortes de blocs tel qu'un chapitre, un resume ou une note. 
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<span> 



^ La balise <span> est similaire aux autres balises HTML, 
elle peut etre imbriquee et avoir id et class comme 
attributs. 



<htmlxhead> 

<style type = "text/css"> 
.bigred {font-size: 24pt; 

font-family: Arial; color: red;} 
</stylex/head> 
<body> 

<p> Now is the <span class = "bigred"> 

best time </span> ever! 
</p> 
</body></html> 
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Edit and Click Me » ) 



<html ><head> 

<style type - "taxt/c5s"> 
.bigted {font-size: 24pt; 

font-family: Arial; color: red; 
</style></head> 
<body> 

<p> Now is the <span class - "fciigred"> 

best time </span> ever! 
</p> 
</bodyx/htial> 



Your Result: 

Now is the best time ever! 



Edit the code above and click to see the result. 



W3Schools.conn - Try it yourself 
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Exemple 



Edit and Click Me >> 



<html> 
<head> 

<style type="tej;t/c5s"> 

span. blue {color : lights kyblue; font-weight: bold} 
span. green { color :dar)colivegreen; font- weight: bold} 
</style> 
</head> 

<body> 

<p>My mother has <span class="blue">light blue?</span> eyes 
and my father has Opati c;lass="green">dark: green</5pan> 
eyes .</p> 

</body> 
</htrnl> 



Your Result: 

My mother has eyes and my father has 

dark green eyes. 



Edit the code above and click to see the result. 



W3Schools.com - Try it yourself 
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Exemple d'utilisation de div : Effectuez les modifications 
necessaire pour avoir I'affichage comme la figure suivante 



Tout centre 




• T 




• tout: 

* tout 






Tout centre la marge droite 




• tout centre- la msrgedroile 

» tout; 




♦ tout 



<html> 
<body> 

<h1>Tout centre</h1> 
<ul> 

<li>tout centre</lixli>tout?</lixli>tout ! </li> 
</ul> 

<h1>Tout contre la marge droite</h1> 

<ulxli>tout contre la marge droite</lixli>tout?</lixli>tout!</li> 
</ul> 

</bodyx/html> 
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Exemple d utilisation de div : 

solution 



<l lags/ try i \.e s p? f 1 1 ens m 



1 



Edit and Click Me >> 



<html> 

<body> 
<div align="center"> 
<hl>Tout centre</hl> 
<ul> 

<li>tout centr^</lixli>tovit7</lixli>toijt!</li> 

<r/ul> 

</div> 

<div align="right r '>- 

<hl>Tout centre la marge dEoite</hl> 

<ulxli>tout contre la marge droite</lixii>tout? 

</aixli>tgut!</li> 

</ul> 

</div> 

</bcdyx/htirLl> 



Tout centre 



tout centre 
tout? 
tout! 



Tout contre la marge 
droite 



tout contre la marge droite 
tout? 
tout! 



Edit the code above and click to see the result. 




W3Schools.com - Try it yourself 1 
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Exemple de style interne 
pour d.iv et span 



<html> 

<headxtitle>Texte du titre</title></head> 
<body> 

<div style="text-align:center; padding:20px; border : thin solid red; margin:25px"> 

<h1>Tout centre</h1> 

<ul> 

<li>tout centre</li> 
<H>tout?</li> 

<lixspan style="font-weight : bold ; color : red">tout ! </spanx/li> 

</ul> 

</div> 

<div style="text-align:right; padding:20px; bordenthin solid blue; margin:25px"> 

<h1>Tout contre la marge droite</h1> 

<ul> 

<li>tout contre la marge droite</li> 
<li>tout?</li> 

<lixspan style="f ont-weight : bold ; color : blue">tout ! </spanx/li> 

</ul> 

</div> 

</bodyx/html> 
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Selecteurs CSS 1 



Selecteur 


Exemple 


Explication 


. class 


. intro 


Tous les elements de class="intro" 


Md 


#f irstname 


L' element ayant pour id="firstname" 


element 


P 


Tous les elements <p> 


element, element 


div,p 


Tous les elements <div> ET tous les 
elements <p> 


element element 


div p 


Tous les elements <p> imbriques dans des 
elements <div> 



Definir des pseudo-formats 



: link (pour des cibles de liens pas 
encore visitees), 



:visited (pour des cibles de liens deja 
visitees), 



:hover (pour des liens sur lesquels 
I'utilisateur passe avec la souris) et 



:active (pour des liens sur lesquels on 
clique). 




<html> 
<head> 

<title>Titre du fichier</title> 
<sty!e type- 'text/css"> 
a:link { color:#EE0000; text-decoration:none; 

font-weight:bold; } 
a:visited { color:#EEAAAA; text-decoration:none; 

font-weight:bold; } 
a:hover { color:#EE0000; text-decoration:none; 

background-color:#FFFF99; font-weight:bold; } 
a:active { color:#0000EE; background-color:#FFFF99; 

font-weight:bold; } 
body { font-family:Arial,sans-serif; font-size:12pt; ] 
</stylex/head> 
<bodyxp> 

Sans doute connaissez-vous la <a href="../../index.htm" 
page d'entête de chapitre sur les CSS</a><br> 
et aussi la <a href="../../../index.htm">page d'accueil à SELFHTML</a><br> 
Mais connaissez-vous aussi l'<a href="../-./--/introduction/hypertexte/histoire.htm">histoire de 

l'hypertexte</a>?<br>ou bien l'<a href="../../../xml/regles/arborescence.htm">arborescence d'un fichier 

XML</a>? 
</px/bodyx/html> 
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Quelques Selecteurs CSS2 



Selecteur 


Exemple 


Explication 


* 


* 


Tous les elements 


el emen t> el emen t 


div>p 


Tous les elements <p> ayant I'element <div> 
element parent 


el emen t+ el emen t 


div+p 


Tous les elements <p> places immediatement 
apres un element <div> 



0 



Autres possibilites pour les reperes 
imbriques avec les CbS 2.0 : exemple 



les elements i, dans la mesure ou ils sont places dans un element 
div, recevront une couleur de police rouge pour le texte (colonred;) 

Avec le signe > est etabli que I'element p dans la mesure ou il est place dans 
un element div, recevra une couleur de texte bleue (colonblue;). Mais 
seulement quand I'element p est place sous la forme: <divxpx/px/div>, 
done un niveau a I'interieur de I'element div 



<html> 
<head> 

<title>Titre du fichiej/fc/i 
<style type="text/css 



div i { color: red; }/ 
div > p { color:blur; } 
div + p { margin-top: 100px; 




</style> 

</head> 

<body> 



Avec la signe + est etabli dans ce selecteur que les elements p qui 
sont places immediatement apres un element div, recoivent un 
espace de 100 pixels (margin-top:100px;). Dans I'exemple ci-dessus 
e'est ce qui arrive avec I'avant-dernier element p. Celui-ci suit 
immediatement le passage div. 



<div align="center"> 

Texte dans un passage div avec <b>seulement du texte en caracteres gras</b> et <i>en italique 

et <b>en plus du texte</b> en caracteres gras</i>. 
<p>Paragraphe de texte dans un passage div avec <b>seulement du texte en caracteres gras</b> et 

<i>en italique et <b>en plus du texte</b> en caracteres gras</i>.</p> 
<table border="l "><tr><td><p>Paragraphe de texte dans une cellule de tableau. </px/td> 
</tr></table> 

</div><p>Paragraphe de texte hors d'un passage div avec <b>seulement du texte en caracteres 

gras</b>et <i>en italique et <b>en plus du texte</b> en caracteres gras</i>.</p> 
<p>Encore un paragraphe de texte . </px/body></html> 
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Jk Autres possibilites pour les reperes 
imbriques avec les CSS 2.0 : exemple 



fexte dans un passage div avec seulement du texte en caracteres 

gras at en italique et en plus du texts en caracteres gras. 
Paragraphs de teste dans un passage div avec seulement du teste 
en caracteres gras et en italique et en plus du texte en 

caracteres gras. 

Paragraphe de texte dans une cellule de tableau. 



Paragraphe de texte hers d'un passage div avec settlement du 
texte en caracteres gras eten italique eten plusdu texte en 

caracteres gras 

Encore un paragraphe de texte. 



<html><head> 

<style type= "text/css"> 

div i { color: red; } 

div > p { color: blue; } 

div + p ( margin-top: lOOpx; } 

</style></head> 

<body> 

<div align= center"> 

Texte dans un passage div avec <b>seulement dj texte en caractë|res;> 
gras</b> et <i>er italique et <b>en plus du texte</b> en caractã res.? 
gras</i>. 

<p>Paragraphe de texte dans un passage div avec -^seulement dj texte en.? 
caractè res gras</t)> et <iaen italique et <b>en plus du texte</b> en.? 
caractères gras</i>.</p> 
<table border= n l"> 
<tr> 

<td><p>Paragraphe de texte dans une cellule de tableau. </p></td> 

</tr></table> 

</div> 

<p>Paragraphe de texte hors d'un passage div avec <b>seulenent du texte en 

caractè res gras</b> 

et <i>en italique et <b>en plus du texte</b> 

en caractères gras</i></p> 

<p>Encore un paragraphe de texte. </p> 

</body> 

</ht mt> 
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Selecteur d'attribut, pseudo- 
class et pseudo-element 



Selecteur Exemple 


Explication 


CSS 


[target] 


Tous les elements avec I'attribut target 


2 


[target= blank] 


Tous les elements avec I'attribut target egal a "_blank" 


2 


[ a t tribu te~= value] 


[title~=flower] 


Tous les elements avec I'attribut "title" qui contient des 
mots separes par des espaces, I'un d'entre eux est "flower" 


2 




\_attribute\=language] 


[lang|=en] 


Tous les elements dont I'attribut lang contient "en" ( meme 
en-US) 


2 




:link 


a:link 


Tous les liens hypertextes 


1 


: visited 


a: visited 


Tous les liens hypertexte deja visites 


1 


:active 


a:active 


Un lien hypertexte selectionne 


1 


: hover 


a:hover 


Passage du pointeur de la souris sur un lien 


1 


: focus 


input:focus 


Le curseur est dans I'element input 


2 


: first-letter 


p:fi rst-letter 


La premiere lettre de tous les elements <p> 


1 


: first-line 


p:first-line 


La premiere ligne de tous les elements <p> 


1 


: first-child 


p:fi rst-child 


Tous les elements <p> qui sont le premier enfant de leur 
parent 


2 




language) 


p:lang(it) 


Tous les elements <p>dont I'attribut lang contient "it" 


2 
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I'attribut 



4: definition de format pour tous les elements p. 
5-6: deux autres definitions de formats pour les elements 
p, mais seulement pour ceux qui ont I'attribut align=. Avec 
la syntaxe p[align] tous les elements p qui ont I'attribut 
align, sont concernes. Avec p[align=center] tous les 
elements p qui ont I'attribut align-'center" dans le repere 
d'ouverture, sont concernes. 
7: Avec td[abbr~=Paris] Sont concernees toutes les 
cellules de tableau du type td, qui ont I'attribut abbr 
auquel la valeur Paris a ete affectee. Cette syntaxe trouve 
I'un de plusieurs mots separes par des espaces dans les 
valeurs affectees aux attributs. 

8: Avec *[lang|=en] ce sont finalement tous les elements 
(* pour "tous les elements") qui sont concernes s'ils ont 
un attribut universel lang avec une valeur telle que en ou 
bien aussi en-US. Cette syntaxe trouve des parties 
separees par des traits d'union dans les affectations de 
valeur aux attributs. 



<html> 

<headxtitle>Titre du fichier</title> 
<style type="text/css"> 

P { font-weight :bold; font-family:Tahoma,sans-serif; 

font-size :14pt; } 
p[align] { colonred; } 

p[align=center] { colonblue; text-align: left; } 
td[abbr=Paris] { background-color:#FFFF00 } 
*[lang|=en] { background-color:#FF0000; color:#FFFFFF; } 
</style> 
</head> 
<body> 

<p>C'est un paragraphe de texte des plus banals.</p> 
<p align-"right">C'est un paragraphe de texte 

aligné à droite.</p> 
<p align-"center">C'est un paragraphe de texte 

centré? vraiment centré?</p> 
<table border="l"xtr> 
<th>Paris</th> 
<th>Marseille</th> 
</trxtr> 

<td abbr-"Suivent des d'informations sur Paris "> 

Bien des choses à dire sur Paris</td> 
<td abbr-"Suivent des d'informations sur Marseille">Bien des choses à dire sur Marseille</td> 
</trx/table> 

<p>Un paragraphe de texte <span lang-"fr">avec du</span> texte <span lang-"en">about</span> un <span lang-"en-US">English 
man in New York</spanx/p> </body> </html> 
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^Le CSS3 est le nom employe pour caracteriser 
I'ensemble des nouveautes depuis le CSS2.1. 



^11 permet de realiser des effets visuels impressionnants 
en quelques lignes. 

^C'est encore un brouillon qui n'est pas supporte par 
tous les navigateurs; 
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L'attribut de bordure 
arrondie 



*>Creati on de bordures rondes: l'attribut border-radius 



1 <html> 

2 <head><meta http-equiv="Content-Type n content="text/html; charset=iso-8859-l"> 
<title>Untitled Document</title> 
<style type="text/css"> 



3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 



.comment { 

background: white, 
border: lpx solid black; 

border-radius: 30px; 

} 



Untitled Document 








<- C ft MiWM 






% 


? Teleeriargement de .. 


Mise en formed 


I m ^o>myj 





</style> 

</head> 
<body> 

<p align="center" class="comment"> 

Introduction au CSS3 ! 
</p> 
</body> 
</html> 



( Introduction au CSS3 ! 
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incompatibilite 



^Malheureusement, cet attribut n'est pas compatible 
avec tous les navigateurs, pour certains cas, il faut le 
preceder par le prefixe du navigateur : 



<style type="text/css"> 
. comment { 
background: white; 
border: 1px solid black; 
border-radius: 30px; } 
div { 

border: 2px solid #a1a1a1; 
padding: 10px 40px; 
background: #dddddd; 
width: 300px; 

border-radius: 25px; 

-moz-border-radius : 25px; /* Firefox 3.6 and earlier */ } </style> 



Le prefixe specifique a chaque navigateur 
-moz- pour Firefox 

-webkit- pour Chrome, Safari, iPhone, 
Android 

-o- pour Opera 

-ms- pour Internet Explorer 

...et il en existe encore d'autres... 
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I O file:///C:/wanip/wwiw/&tylescss3.html 



"> Tdechargemert de 



Introduction au CSS3 ! 



une Bordure arrondie qui marche pour 
Firefox version 3.6 et celles qui la 
precedent. 



6 <style type="text/css"> 
.comment { 
background: white; 
border: lpx solid black; 
border-radius: 30px; 

10 } 
11 

12 div { 

border: 2px solid Salalal; 
14 padding: lOpx 40px; 

background: #dddddd; 
16 width: 300px; 

border-radius: 25px; 

-moz-border-radius: 25px; /* Firefox 3.6 and earlier */ 

19 } 

20 </style> 
</head> 

22 <body> 

23 <p align="center" class="comment"> 

24 Introduction au CSS3 ! 

25 </p> 

26 <br/> 

27 <br/> 

<div>une Bordure arrondie qui marche pour Firefox version 3.6 et celles qui la precedent. 



</div> 



Neila Ben Lakhal 



Autres effets 



^box-shadow :Applique une ombre sur un bloc 

^text-shadow : Applique une ombre sur un texte 

^■Gradients : Affiche un degrade de couleurs 

*>font face : Permet d'utiliser n'importe quelle police 

^Opacity : Ajuste la transparence d'un element 

^Transform : Deplace, deforme, ou effectue la rotation 
d'un element 

^Transition Passe d'un etat a un autre d'un element avec 
par une transition animee 

^*3D transform : Effectue des transformations en 3D 
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Les nouveaux selecteurs de 

CSS3 



£He CSS3 introduit un ensemble de nouveaux selecteurs : 
^Selection par position des fils : 

& : nth-child(expression) permet de selectionner un 
ensemble d'elements selon leur position grace a une 
expression mathematique ou bien grace a certains mots-cles. 

^Exemple : 

table tr:nth-child(odd) { 
background-color: yellow; 
} 

^Un cas d'utilisation tres frequent est la coloration d'un 
tableau. 

£Hes lignes impair du tableau auront un fond jaune 



CSS Properties 



CSS Property Groups 

^Background 
^Border and outline 
^Dimension 
^Font 

^Generated content 
*>Text 



*>List 

^Margin 

*>Padding 

^Positioning 

*> Print 

*>Table 



Pour une description detaillee de ces differentes proprietes 
de style: 

http://www.w3schools.com/css/css reference.asp 
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CSS Properties 



& Mise en forme de la police 

Font-family Propriete pour choisir la police. 

Font-size Propriete pour le corps (tail le de la police). 

Font-style Propriete pour I'italique. 

Font-variant Propriete pour le texte en petites majuscules. 

Font-stretch Propriete pour retirement de la police 

V Mise en forme du texte 

Color Propriete pour definir la couleur du texte. 

Letter-spacing Propriete pour definir I'espacement entre les caracteres. 
Word-spacing Propriete pour definir I'espacement entre les mots. 
Text-transform Propriete pour forcer les minuscules ou les majuscules. 
Text-decoration Propriete pour souligner, surligner, barrer, clignoter. 
Text-shadow Propriete pour creer un effet d'ombrage sur un texte. 
©Etc.. 



Formatage du texte en CSS (1) 



©La taille du texte: 
^Propriete font-size 

^Valeurs: En pixels (14px), en cm (2cm), en mm 
(14mm), en em (0.7em), en pourcentage (130%), en 
valeurs relatives (xx-small, x-small, small, large, x- 
large, xx-large). 

©La police: 

-JPropriete font-family 

^Valeurs:Arial, Arial Black, Comic Sans MS, Courier 
New, Georgia, Impact, Times New Roman, Trebuchet 
MS, Verdana. 
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Formatage du texte en CSS (2) 



^Alignement: 

^Propriete text-align 

^Valeurs: left, center, right, justify . 

jQue pour les balises de types block. 



^H'indentation: 

^Propriete text-indent 

^Valeurs: En pixels (14px), en cm (2cm), en mm 
(14mm). 
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Effets de style(l) 



^italique: 

^Propriete font-style 

^Valeurs: italique, oblique, normal. 

^Remarque: la balise <em> sert a mettre en valeur du texte par 
defaut sur les navigateurs ?a sera de I'italique. 

em 
{ 

FONT-STYLE: normal; 

*>Gras: 

^Propriete font-weight 

^Valeurs: bold, normal. 

^Remarque: la balise <strong> sert a mettre en valeur du texte 
par defaut sur les navigateurs ga sera du gras. 

strong 
{ 

FONT-STYLE: normal; 
} 
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Effets de style(2) 



^Les majuscules: 

^Propriete font-variant 

^Valeurs: small-caps (le texte sera ecrit en petites 
capitales), normal. 

^Propriete text-transform 

^Valeurs: uppercase (tout le texte sera ecrit en 
majuscules), lowercase (tout le texte sera en 
minuscules), capitalize (la premiere lettre de chaque 
mot sera en majuscules), none (pas de 
transformation) . 



Exemple 



hi 
{ 

text -align: center; 

font-family: Arial, "Times New Roman", Verdana, serif; 
text -transform: capitalize; 

/* Les premieres lettres des mots du titre seront en majuscules */ 

stylel 

text -transform: uppercase; 

* De mets en majuscules */ 

style2 

text -transform: lowercase; 
font-style: italic; 

* Le texte en minuscules et italique */ 

style3 

font-variant: small-caps; 

* le texte sera ecrit en petites capitales*/ 
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Effets de style(3) 



^Decoration: 

^Propriete text-decoration 

^Valeurs: underline (souligne), line-through (barre), overline 
(ligne au-dessus), blink (clignotant) (Attention, cette propriete 
ne marche pas sous Internet Explorer. El le fonctionne en 
revanche bien surtous les autres navigateurs, dont Mozilla 
Firefox). none (normal). 

^Couleur de texte: 
^Propriete color 

^Valeurs: En indiquant le nom de la couleur (white,silver, gray, 
maroon, fushia...), en hexadecimal (#FFFFFF), en RGB 
(rgb(243,65,243)). 




lilt] 



hi 



text-align: center; 

font-family: "Arial Black", Arial, "Times New Roman", serif; 
text-decoration: blink; /* Le titre sera clignotant */ 
color: rgb(243,65,243); 



souligne 

text-decoration: underline; 

barre 

text-decoration: line-through; 

ligne_dessus 

text-decoration: overline; 
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Effets de style(4) 



^Couleur de fond: 

^Propriete background-color 

^Valeurs: En indiquant le nom de la couleur (white,silver, gray, 
maroon, fushia...), en hexadecimal (#FFFFFF), en RGB 
(rgb(243,65,243)). 

^Image de fond: 

^Propriete background-image 
^Valeurs: url(« nom_image.jpg") 
^Propriete background-attachment 

^Valeurs: fixed (I'image de fond reste fixe), scroll (I'image de 
fond defile avec le texte (par defaut)). 



Effets de style(5) 



^Repetition image de fond: 

-^Propriete background-repeat 

^Valeurs: no-repeat (le fond ne sera pas repete. 
L'image sera done unique sur la page), repeat-x (le 
fond sera repete uniquement sur la premiere ligne 
horizontalement), repeat-y (le fond sera repete 
uniquement sur la premiere colonne), verticalement, 
repeat (le fond sera repete (par defaut)). 
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Effets de style(6) 



^Position image de fond 

^Propriete background-position 

^Valeurs: en pixel (background-position:30px 50px; votre fond 
sera place a 30 pixels de la gauche et a 50 pixels du haut ), top 
(en haut), bottom (en bas), left (a gauche), center (centre), 
right (a droite). 

-^11 est possible de combiner les positions (background-position: 
top right;) 

-^Cette propriete n'est interessante que si vous avez mis 
"background-repeat: no-repeat;" (un fond qui ne se repete 
pas). 

^Combine les proprieties de I'image de fond: 

^background: url("../images/skieur.gif") no-repeat top right 
fixed; 



Exemple 







HI 






{ 






TEXT-ALIGN: center; /* Pour centrer le titre */ 






FONT-FAMILY: "Arial Black", Arial, Verdana, serif; 






/* Un titre en Arial Black */ 






} 






P 






{ 






TEXT-INDENT: 30px; /* Les paragraphes commenceront 30 px sur la droite */ 






TEXT-ALIGN: justify; /* lis seront justifies */ 






FONT-SIZE: large; /* pour grossir le texte */ 






FONT-FAMILY: "Comic Sans MS", "Trebuchet MS", Georgia, serif; 






/* on essaie d J avoir la police comic sans Ms en priorite*/ 






} 
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Forme abregee 



^Certaines proprietes peuvent etre reuni ensemble 

^Exemple : font-style, font-variant, font-weight, 
font-family et font-size, reunies en font 

P { 

font-family: Arial, Helvetica, sans-serif; 
font-size: small; 
color: blue; 
} 

P ( 

font: small Helvetica, Arial, sans-serif; 

color: blue; 

} 
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